<template>
  <div class="login-container">
    <!-- 登录卡片：居中显示，简洁风格 -->
    <div class="login-card">
      <div class="login-header">
        <h2>乒乓球培训管理系统</h2>
        <p>请输入账号密码登录</p>
      </div>

      <!-- 登录表单：仅账号+密码 -->
      <el-form
          :model="form"
          :rules="loginRules"
          ref="formRef"
          label-width="80px"
          class="login-form"
          status-icon
      >
        <!-- 账号输入（支持用户名/手机号，后端统一校验） -->
        <el-form-item label="账号" prop="username">
          <el-input
              v-model="form.username"
              placeholder="请输入用户名或手机号"
              clearable
              maxlength="20"
              show-word-limit
              @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon class="icon"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 密码输入（匹配注册时的复杂度规则） -->
        <el-form-item label="密码" prop="password">
          <el-input
              v-model="form.password"
              type="password"
              placeholder="8-16位（含字母、数字、特殊字符）"
              show-password
              maxlength="16"
              @keyup.enter="handleLogin"
          >
            <template #prefix>
              <el-icon class="icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <!-- 操作按钮：登录+跳转注册 -->
        <el-form-item class="login-btn-group">
          <el-button
              type="primary"
              @click="handleLogin"
              :loading="loginLoading"
              style="width: 100%"
          >
            登录系统
          </el-button>
          <div class="register-link">
            还没有账号？
            <el-link @click="goToRegister" type="primary">立即注册</el-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { ElMessage, ElMessageBox } from 'element-plus'
import { login as loginApi } from '@/api/auth'
import { User, Lock } from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()
const route = useRoute()
// Pinia Store实例（与auth.js中定义的字段保持一致）
const authStore = useAuthStore()

// 表单引用（用于校验）
const formRef = ref()
// 登录加载状态（防止重复提交）
const loginLoading = ref(false)

// 登录表单数据
const form = reactive({
  username: '', // 账号（用户名/手机号）
  password: ''  // 密码
})

// 表单校验规则（保持原有，优化特殊字符提示）
const loginRules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 20, message: '账号长度需在4-20位之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,16}$/,
      message: '密码需8-16位，含字母、数字和@$!%*#?&中的一种特殊字符',
      trigger: 'blur'
    }
  ]
})

// 核心：登录处理逻辑（重点修复字段映射和格式化）
const handleLogin = async () => {
  try {
    // 1. 前端表单校验
    await formRef.value.validate()
    loginLoading.value = true

    // 2. 调用登录接口（打印完整响应，便于调试字段问题）
    const res = await loginApi(form)
    console.log('✅ 登录接口完整响应：', JSON.stringify(res, null, 2))

    // 3. 接口基础校验（增强容错）
    if (!res) throw new Error('登录接口无响应，请检查网络或后端服务')
    if (res.code !== 200) throw new Error(`登录失败：${res.message || '未知业务错误'}`)
    if (typeof res.data !== 'object' || res.data === null) throw new Error('登录数据格式错误，需为对象类型')
    if (!res.data.token) throw new Error('登录接口未返回Token，请联系开发人员')

    // 4. 后端核心字段校验（适配后端返回的 "campus_id 对象" 和 平铺字段）
    const backendData = res.data // 后端返回：{userId, username, userType, campus_id: {}, token, ...}
    // 必返字段校验（允许后端返回下划线字段，后续映射为驼峰）
    const requiredFields = [
      { key: 'userId', alias: 'user_id' }, // 兼容 userId / user_id
      { key: 'username', alias: 'user_name' }, // 兼容 username / user_name
      { key: 'userType', alias: 'user_type' } // 兼容 userType / user_type
    ]
    const missingFields = []
    const fieldValues = {}
    // 遍历校验必返字段（优先用标准驼峰，没有则用下划线别名）
    requiredFields.forEach(({ key, alias }) => {
      if (backendData[key] !== undefined && backendData[key] !== null) {
        fieldValues[key] = backendData[key]
      } else if (backendData[alias] !== undefined && backendData[alias] !== null) {
        fieldValues[key] = backendData[alias]
      } else {
        missingFields.push(key)
      }
    })
    // 若缺失必返字段，直接抛出错误
    if (missingFields.length > 0) {
      throw new Error(`用户信息缺少必填字段：${missingFields.join(', ')}，请联系后端补充`)
    }

    // 5. 格式化用户信息（重点处理 campus_id 对象 → 提取 id 和名称）
    const userInfo = {
      // 基础信息（适配后端数字ID，转为字符串避免类型问题）
      id: fieldValues.userId.toString(),
      username: fieldValues.username.trim(),
      realName: (backendData.realName || backendData.real_name || fieldValues.username).trim(),
      userType: fieldValues.userType.toLowerCase(), // 统一转为小写，避免大小写问题（如 Admin → admin）

      // 账号状态（适配后端可能的状态值：1=正常，0=禁用）
      status: backendData.status === '1' || backendData.status === 1 ? '正常' : '禁用',

      // 校区信息（从 backendData.campus_id 对象中提取，适配后端字段）
      campus: {
        id: backendData.campus_id?.id !== undefined ? backendData.campus_id.id.toString() : '', // 转为字符串，与前端判定一致
        name: backendData.campus_id?.name || backendData.campus_name || '未分配校区',
        address: backendData.campus_id?.address || ''
      },

      // 其他辅助字段（兜底默认值，避免前端渲染报错）
      phone: backendData.phone || '未绑定手机号',
      gender: backendData.gender ? (backendData.gender === '1' || backendData.gender === 1 ? '男' : '女') : '未设置',
      age: backendData.age ? `${backendData.age}岁` : '未设置',
      email: backendData.email || '未绑定邮箱',
      level: backendData.level || '普通',
      teachingYears: backendData.teachingYears ? `${backendData.teachingYears}年` : '0年',
      photo: backendData.photo || 'https://cube.elemecdn.com/3/7c/3ea6beec64369e630459aa77654b212c.png',
      teachingExperience: backendData.teachingExperience || '暂无教学经验',
      createTime: backendData.createTime ? formatTime(backendData.createTime) : '未知时间'
    }

    // 6. 超级管理员判定（核心逻辑：admin角色 + campus.id=1）
    const CENTER_CAMPUS_ID = '1' // 与数据库bigint类型1对应（转字符串避免类型不匹配）
    userInfo.isSuperAdmin = userInfo.userType === 'admin' && userInfo.campus.id === CENTER_CAMPUS_ID
    console.log('✅ 格式化后用户信息（含超级管理员判定）：', JSON.stringify(userInfo, null, 2))

    // 7. 存储到Pinia（与auth.js中setAuth的参数要求一致：token + 格式化用户信息）
    authStore.setAuth(backendData.token.trim(), userInfo)
    console.log('✅ Pinia存储Token和用户信息成功')
    // 8. 动态跳转（优先跳登录前想访问的页面，否则跳默认仪表盘）
    const redirectPath = route.query.redirect || getDefaultDashboard(userInfo)
    console.log('✅ 准备跳转到：', redirectPath)
    router.push(redirectPath)

    // 9. 登录成功提示（区分超级管理员/普通角色）
    const roleText = userInfo.isSuperAdmin ? '超级管理员' :
        userInfo.userType === 'student' ? '学员' :
            userInfo.userType === 'coach' ? '教练' : '管理员'
    ElMessage.success(`欢迎回来，${userInfo.realName}（${roleText}）！`)

  } catch (err) {
    // 精细化错误处理（便于定位问题）
    console.error('❌ Pinia存储失败，原因：', err.message)
    ElMessage.error('登录状态存储失败：' + err.message)
    console.error('❌ 登录异常详情：', err)
    if (err.name === 'ValidationError') {
      ElMessage.warning('请完善账号密码，确保符合输入规则')
    } else if (err.message.includes('Network Error')) {
      ElMessageBox.alert(
          '网络异常，请检查：<br>1. 后端服务是否已启动<br>2. 接口地址是否正确<br>3. 网络连接是否正常',
          '登录失败',
          { type: 'error', dangerouslyUseHTMLString: true }
      )
    } else {
      ElMessage.error(err.message || '登录失败，请重试或联系管理员')
    }
  } finally {
    // 无论成功失败，关闭加载状态
    loginLoading.value = false
  }
}

// 辅助函数：时间格式化（兼容后端时间戳/字符串）
const formatTime = (timeInput) => {
  if (!timeInput) return '未知时间'
  // 处理后端可能返回的时间戳（毫秒/秒）
  const time = typeof timeInput === 'number' ?
      (timeInput.toString().length === 10 ? timeInput * 1000 : timeInput) :
      timeInput
  const date = new Date(time)
  // 避免Invalid Date问题
  if (isNaN(date.getTime())) return '未知时间'
  // 格式化：YYYY-MM-DD HH:MM
  return `${date.getFullYear()}-${
      (date.getMonth() + 1).toString().padStart(2, '0')
  }-${
      date.getDate().toString().padStart(2, '0')
  } ${
      date.getHours().toString().padStart(2, '0')
  }:${
      date.getMinutes().toString().padStart(2, '0')
  }`
}

// 辅助函数：获取默认仪表盘地址（直接接收格式化后的userInfo，避免依赖authStore未更新的问题）
const getDefaultDashboard = (userInfo) => {
  // 容错：若用户信息未传入，返回登录页
  if (!userInfo || !userInfo.userType) {
    ElMessage.warning('用户角色信息异常，将重新加载登录页')
    return '/'
  }

  // 兼容后端可能的角色拼写错误（如 studen → student）
  const normalizedUserType = userInfo.userType === 'studen' ? 'student' : userInfo.userType

  // 根据角色返回默认页
  switch (normalizedUserType) {
    case 'student':
      return '/dashboard/student/my-courses' // 学员默认：我的课程
    case 'coach':
      return '/dashboard/coach/course-schedule' // 教练默认：课程表
    case 'admin':
      // 超级管理员→校区管理；普通管理员→学员管理（适配你的路由路径）
      return userInfo.isSuperAdmin ?
          '/dashboard/admin/campus-manage' :
          '/dashboard/admin/student-admin'
    default:
      ElMessage.warning(`未知角色【${userInfo.userType}】，将跳转到登录页`)
      return '/'
  }
}

// 跳转注册页（保持原有）
const goToRegister = () => {
  router.push('/register')
}
</script>

<style scoped>
/* 登录页面样式：简洁居中，适配不同屏幕 */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f5f7fa;
  background-image: linear-gradient(120deg, #e6f7ff 0%, #f0f9eb 100%);
}

.login-card {
  width: 420px;
  padding: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  /* 适配小屏幕（手机端） */
  @media (max-width: 576px) {
    width: 90%;
    padding: 24px;
  }
}

.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-header h2 {
  color: #2c3e50;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
}

.login-header p {
  color: #666;
  font-size: 14px;
}

.login-form {
  margin-top: 16px;
}

.login-form .el-form-item {
  margin-bottom: 20px;
}

.icon {
  color: #409eff;
}

.login-btn-group {
  margin-top: 12px;
}

.register-link {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

/* 输入框聚焦样式优化（增强视觉反馈） */
.login-form .el-input__wrapper:focus-within {
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  border-color: #409eff;
}

/* 按钮加载状态文字居中 */
.login-btn-group .el-button--loading .el-button__text {
  visibility: visible;
}
</style>